<template>
  <section class="taskContent" v-loading="taskListLoading" element-loading-background="#fff">
      <div v-if="taskList.length">
        <div class="left">
            <span>{{isReview == "1" || isReview == undefined ? "待审核任务" : "待执行任务"}}</span>
        </div>
        <div style="clear:both"></div>
      </div>
      <div v-if="taskList.length">
        <div v-for="(item, index) in taskList" :key="index" >
          <div class="detail" :class="`task_item ${isShowTask && index == currentIndex ? 'active_index' : ''}`" @click="checkTask(item, index)">
              <div class="detail_item" :class="`${isShowTask && index == currentIndex ? 'active_border' : ''}`">
                <el-col class="image_box" :span="1">
                  <img class="image" src="../../static/img/party-logo.png" alt="">
                </el-col>
                <el-col :span="4">
                    <span class="detailLabel">任务名称:</span>
                    <span>{{item.taskName || item.name}}</span>
                </el-col>
                <el-col :span="4">
                    <span class="detailLabel">任务类型:</span>
                    <span>{{item.taskType || item.type}}</span>
                </el-col>
                <el-col :span="4">
                    <span class="detailLabel">任务时间:</span>
                    <span>{{item.taskYear ? item.taskYear+'年' : item.taskYear}}</span>
                </el-col>
                <el-col :span="4">
                    <span class="detailLabel">截止日期:</span>
                    <span>{{item.endTime}}</span>
                </el-col>
                <el-col v-if="isReview == '1' || isReview == undefined ? true : false" :span="5">
                    <span v-show="item.objectName" class="detailLabel">执行组织:</span>
                    <span v-show="item.objectName">{{item.objectName}}</span>
                </el-col>
                <el-col  v-if="isReview == '1' || isReview == undefined ? false : true" :span="5">
                    <div class="statusButtonDiv">
                        <el-tag v-if="item.status === '0'"  class="statusDiv" type="danger" effect="dark">{{item.isRejected == '1' ? '当前状态：市委驳回' : '当前状态：待提交'}}</el-tag>
                        <!-- <el-tag v-else-if="item.isRejected == '1'" class="statusDiv" type="success" effect="dark">当前状态：市委驳回</el-tag> -->
                        <el-tag v-else-if="item.status === '1'" class="statusDiv" type="primary" effect="dark">当前状态：待市委审核</el-tag>
                        <el-tag v-else-if="item.status === '2'" class="statusDiv" type="success" effect="dark">当前状态：市委审核通过</el-tag>
                        <el-button v-show="item.status === '0'" :loading="submitBtnLoading" class="statusSubmit" @click.stop="submit(item)">提交</el-button>
                    </div>
                </el-col>
                <el-col :span="2" style="float: right">
                  <div :class="`arrow ${isShowTask && index == currentIndex ? 'active_arrow' : ''}`"></div>
                </el-col>
              </div>
          </div>
          <el-collapse-transition>
              <slot :index="index">
              </slot>
          </el-collapse-transition>
        </div>
        <el-pagination
          small
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="5"
          @current-change="getTaskList"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <div v-else class="no_task">
        <img :src="`${isReview == '1' || isReview == undefined ? '../../static/img/no-review-task.png' : '../../static/img/no-execute-task.png'}`">
      </div>
  </section>
</template>

<script>
export default {
  name: 'PendingTask',
  props: {
    taskTypes: {
        type: Array,
        default: function () {
            return ['日常工作考核', '综合年度考核']
        }
    },
    isReview: {
          type: String
      },
    taskIndex: {
      type: Number
    },
    hasDepart: {
      type: String
    }
  },
  data(){
    return{
      taskListLoading: false,
      currentIndex: '',
      currentTask: [],
      total: '',
      taskList: [],
      user: {},
      isShowTask: false,
      isShowCurrentTask: false,
      pageParams: {
        page: 0,
        size: 5
      },
      submitBtnLoading: false,
    }
  },
  methods: {
    async checkTask(item, index){
      console.log('--------------');
      this.currentIndex = index;
      let taskId = item.id;
      if (this.user.sysDistrict.districtLevel === 2 || item.taskId) {
          taskId = item.taskId;
      };
      let param = {
            taskId: taskId
      };
      if (this.hasDepart == '0') {
          param.objectType = 'Party'
      }
      const res = await this.$http('POST', `/identity/cadreTaskObject/list?sort=objectId,asc`, param, false)
      this.currentTask = res;
      this.isShowTask = !this.isShowTask;
      if (this.$parent.taskIndex == index || this.taskIndex ==index) {
        index = -2;
        this.currentIndex = -2;
      } else {
        this.isShowTask = true
      }
      this.$parent.isShowTaskDetail = true;
      this.$emit('getCurrentTaskDetail', this.currentTask);
      this.$emit('getCurrentTask', item);
      this.$emit('getTaskIndex', this.currentIndex);
    },
    async getTaskList(data){
      this.taskListLoading = true;
      this.currentIndex = -3;
      this.$emit('getTaskIndex', this.currentIndex);
      if (data == undefined) {
        this.pageParams.page = 0;
      } else {
        this.pageParams.page = data -1;
      }
      const res = await this.$http('POST', `/identity/cadreTask/currentTask/list?isReview=${this.isReview}&page=${this.pageParams.page}&size=${this.pageParams.size}`, this.taskTypes, false);
      this.total = res.totalElements;
      this.taskList = res.content;
      setTimeout(_ => {
        this.taskListLoading = false;
      }, 500)
      this.$emit('getIndexScoreCurrentTask', this.taskList.length ? this.taskList[0] : {});
      let isShow = this.isReview == "1" || this.isReview == undefined ? false : true
      if(isShow) {
        if (this.taskList.length) {
          this.checkTask(this.taskList[0], 0)
          console.log('1111111111');
        }
      }
    },
    submit(item){
        this.submitBtnLoading = true;
        console.log(item,'iiiiiiiiiiiii');
        this.$http('post',`identity/kpiQuota/checkAllGetScore`,{districtId: item.objectId,quotaYear: item.taskYear},false).then(res => {
          if (!res.res) {
            this.$confirm('当前任务还有指标尚未打分, 无法提交!', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              showCancelButton: false,
              showConfirmButton: false,
              customClass: 'checkAllGetScore',
              type: 'warning'
            }).catch(() => {   
                this.submitBtnLoading = false;
            });
          } else {
            this.$confirm('确认提交该任务么, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http("GET", `/identity/cadreTaskObject/progressNext?taskObjectId=${item.id}&isSuccess=SUCCESS`, false).then(data => {
                    this.submitBtnLoading = false;
                    // this.currentObject = data;
                    // this.isShowTaskDetail = false;
                    this.getTaskList();
                    this.$parent.scoreList = []
                    this.$message({
                        type: 'success',
                        message: "提交成功！"
                    })
                });
            }).catch(() => {
                this.submitBtnLoading = false;
            });
          }
          console.log(res,'rrrrrrrrrrrrrrrrrrrrrrrrrrrrr');
        })
    },
  },
  created(){
    this.getTaskList()
    this.user = JSON.parse(sessionStorage.getItem("userInfo"));
  }
}
</script>
<style lang="less" scoped>
    .taskContent {
      overflow: hidden;
    }
    .detail_item {
      width: 100%;
      margin-left: 15px;
      margin-right: 15px;
    }
    .active_border {
      border-bottom: 1px solid #eee;
    }
    .taskContent .task_item {
      display: flex;
      margin: 20px 0 0 0;
      height: 60px;
      line-height: 60px;
      border-radius: 5px;
      background-color: #fff;
      border: 1px solid #DFDFDF;
      cursor: pointer;
      transition: all .4s;
      .el-col {
        height: 60px;
      }
    }
    .taskContent .task_item:hover {
        transform:translate(0,-5px);
        background-color: #a6eaf538;
        cursor: pointer;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .taskContent  .active_index {
        border:1px solid rgba(10, 155, 26, 1);
        border-bottom: none;
        border-radius: 5px 5px 0 0;
    }
    .image_box {
      line-height: 68px;
    }
    .left {
      float: left;
      width: 140px;
      font-size: 18px;
      font-weight: bold;
      text-align: left;
      border-left: 4px solid #55BD94;
      padding-left: 10px;
    }

    .detail {
        clear: both;
      position: relative;
      z-index: 999;
      flex: 1;
      text-align: left;
      z-index: 999;
      .el-col {
        text-align: left;
      }
    }
    .detail span {
      font-weight: 700;
    }
    .detail .el-col span:nth-child(1) {
      font-weight: normal;
    }
    .no_task {
      width: 100%;
      height: 695px;
      img {
        margin-top: 150px;
      }
    }
    .el-pagination {
      margin-top: 10px;
      float: right;
      margin-right: 3px;
    }
    .el-pagination.is-background {
        .btn-next, .btn-prev, .el-pager li {
            margin: 0 4px;
            background-color: #f4f4f5;
            color: #606266;
            min-width: 22px;
            border-radius: 2px;
        }
    }
    .arrow {
      width: 15px;
      height: 15px;
      border-top: 1px solid #aaa;
      border-right: 1px solid #aaa;
      transform: translate(100px, 22px) rotate(45deg);
      transition: all .3s;
    }
    .active_arrow {
      transition: all .3s;
      transform: translate(100px, 22px) rotate(135deg);
    }
    .slot_box_hidden {
      height: 0;
      overflow: hidden;
      transition: all 3s;
    }
    .slot_box_show {
      height: 0;
      overflow: hidden;
      transition: all 3s;
    }
    .taskContent .statusButtonDiv{
        // margin: 20px 0px;
        height: 60px;
        line-height: 60px;
        .el-tag {
          padding: 0 20px;
        }
        .statusSubmit{
            height: 42px!important;
            line-height: 30px!important;
            margin-left: 15px;
            // float: left;
            width: 104px;
            font-size: 16px;
            background: #55BD94;
            color: #FFFFFF;
            border-radius: 5px;
        }
    }
</style>

<style lang='less'>
    .taskContent  .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #0A9B1A;
      color: #FFF;
    }
    .checkAllGetScore {
      padding-bottom: 30px!important;
      .el-message-box__content {
        font-size: 16px!important;
      }
    }
</style>
